<template>
  <div
    v-loading.fullscreen.lock="fullscreenLoading"
    class="main-article"
    element-loading-text="Efforts to generate PDF"
  >
    <div class="article__heading">
      <div class="article__heading__title">
        {{ article.title }}
      </div>
    </div>
    <div style="color: #ccc; margin-top: -40px" />
    <div
      ref="content"
      class="node-article-content"
      v-html="article.content"
      id="app"
    />
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export default {
  data() {
    return {
      article: '',
      fullscreenLoading: true,
      ruleForm: {},
      tableData: [],
      customer: {},
      localImageList: [],
    };
  },
  mounted() {
    this.fetchData();
    console.log(JSON.parse(this.$route.query.ruleForm));
    this.ruleForm = JSON.parse(this.$route.query.ruleForm);
    this.tableData = JSON.parse(this.$route.query.tableData);
    this.customer = JSON.parse(this.$route.query.customer);
    this.localImageList = JSON.parse(this.$route.query.localImageList);
    console.log(JSON.parse(this.$route.query.localImageList));
  },
  methods: {
    fetchData() {
      import('./content.js').then((data) => {
        const { title } = data.default;
        console.log(data, 'data');
        document.title = title;
        // this.article = data.default;
        var tr = '';
        this.tableData.forEach((v) => {
          var vtr = `<tr>
        <td>${v.date}</td>
        <td>${v.rj}</td>
        <td>${v.tqyc}</td>
        <td>${v.tyqd}</td>
        <td>${v.hygclz}</td>
        <td>${v.hygcly}</td>
        <td>${v.lzdclz}</td>
        <td>${v.lzdcly}</td>
        <td>${v.sl}</td>
        <td>${v.wx}</td>
    </tr>`;
          tr += vtr;
        });

        var image = '';
        this.localImageList.forEach((v) => {
          var vtr = `
<image src="${v}" style="width:150px;height:150px;display: inline;" /> `;
          image += vtr;
        });
        this.article = {
          title: `郑州大学第一附属医院`,
          content: `<br /><div style="color: #056fda; font-size: 20px;text-align:center;margin-top:-24px">电子喉镜吞咽障碍评估报告</div><hr> <div style="display:  ruby-text;white-space: nowrap;">
            <div style="width:18%">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：${this.customer.xm}</div>
          <div style="width:18%">性别：${this.customer.xb}</div>
          <div style="width:18%">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：${this.customer.nl}</div>
            <div style="width:18%">科别：</div>
            <br />   <br />
            <div style="width:18%;">送检医生：</div> 
            <div style="width: 44%;">患者编号：</div> 
            </div>
            <hr>
<div style="color: #056fda;"><b>结构评估：</b></div>
  <div style="width:100%;display:flex">
    <div style="width:49%">
      鼻咽部分分泌物:${this.ruleForm.bybffmw}<br>
腭咽关闭（空吞）:${this.ruleForm.tygb}<br>
会厌谷分泌物:${this.ruleForm.hygfmw}<br>
梨状窦分秘物（左侧）:${this.ruleForm.hygfmw}<br>
梨状窦分秘物（右侧）:${this.ruleForm.lzkfmwz}<br>
喉前庭分泌物:${this.ruleForm.hqtfmw}<br>
吞咽频率:${this.ruleForm.typl}<br>
舌根后缩（空吞）:${this.ruleForm.sghskt}<br>
</div>
    <div style="width:49%">
      咽壁活动（高调依）:${this.ruleForm.ybhdgdy}<br>
声带内收（左）:${this.ruleForm.sdnsz}<br>
声带内收（右）:${this.ruleForm.sdnsy}<br>
声带外展（左）:${this.ruleForm.sdwzz}<br>
声带外展（右）:${this.ruleForm.sdwzy}<br>
屏气:${this.ruleForm.bq}<br>
感觉（轻触咽壁）:${this.ruleForm.gjqcyb}<br>
咳嗽反射:${this.ruleForm.ksfs}<br>
咳嗽效果:${this.ruleForm.ksxg}
      </div>
</div>
<hr>
      <span > ${image}</span>
      <hr>
      <div style="color: #056fda;"><b>进食观察：</b></div>
  <table border style="border-collapse: collapse">
    <tr>
        <th>性状</th>
        <th>容积</th>
        <th>提前溢出</th>
        <th>吞咽启动</th>
        <th>会厌谷残留（左）</th>
        <th>会厌谷残留（右）</th>
        <th>梨状窦残留（左）</th>
        <th>梨状窦残留（右）</th>
        <th>渗漏</th>
        <th>误吸</th>
    </tr>
  ${tr}
</table>
会厌谷残留:${this.ruleForm.hygcl}<br>
梨状窦残留:${this.ruleForm.lzdcl}<br>
渗漏误吸分级:${this.ruleForm.slwxfj}<br>
<hr>
`,
        };
        setTimeout(() => {
          this.fullscreenLoading = false;
          this.$nextTick(() => {
            // window.print();
            const element = document.getElementById('app'); // 获取需要生成 PDF 的 DOM 元素

            html2canvas(element).then((canvas) => {
              const imgData = canvas.toDataURL('image/png');
              const pdf = new jsPDF();
              const imgProps = pdf.getImageProperties(imgData);
              const pdfWidth = pdf.internal.pageSize.getWidth();
              const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

              pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
              pdf.save('output.pdf'); // 下载 PDF 文件
            });
          });
        }, 3000);
      });
    },
  },
};
</script>

<style lang="scss">
@mixin clearfix {
  &:before {
    display: table;
    content: '';
    clear: both;
  }

  &:after {
    display: table;
    content: '';
    clear: both;
  }
}

.main-article {
  padding: 20px;
  margin: 0 auto;
  display: block;
  width: 740px;
  background: #fff;
}

.article__heading {
  position: relative;
  padding: 0 0 20px;
  overflow: hidden;
}

.article__heading__title {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 26px;
  line-height: 48px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-align: center;
  color: #056fda;
}

.node-article-content {
  margin: 20px 0 0;
  @include clearfix;
  font-size: 16px;
  color: #333;
  letter-spacing: 0.5px;
  line-height: 28px;
  margin-bottom: 30px;
  font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman',
    Times, serif;

  & > :last-child {
    margin-bottom: 0;
  }

  b,
  strong {
    font-weight: inherit;
    font-weight: bolder;
  }

  img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  p {
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.58;
    letter-spacing: -0.003em;
  }

  ul {
    margin-bottom: 30px;
  }

  li {
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;

    letter-spacing: 0.01rem;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.58;
    letter-spacing: -0.003em;
    margin-left: 30px;
    margin-bottom: 14px;
  }

  a {
    text-decoration: none;
    background-repeat: repeat-x;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.84) 100%,
      rgba(0, 0, 0, 0) 0
    );
    background-size: 1px 1px;
    background-position: 0 calc(1em + 1px);
    padding: 0 6px;
  }

  code {
    background: rgba(0, 0, 0, 0.05);
    padding: 3px 4px;
    margin: 0 2px;
    font-size: 16px;
    display: inline-block;
  }

  img {
    border: 0;
  }

  /* 解决 IE6-7 图片缩放锯齿问题 */
  img {
    -ms-interpolation-mode: bicubic;
  }

  blockquote {
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;
    font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman',
      Times, serif;
    letter-spacing: 0.01rem;
    font-weight: 400;
    font-style: italic;
    font-size: 21px;
    line-height: 1.58;
    letter-spacing: -0.003em;
    border-left: 3px solid rgba(0, 0, 0, 0.84);
    padding-left: 20px;
    margin-left: -23px;
    padding-bottom: 2px;
  }

  a {
    text-decoration: none;
  }

  h2,
  h3,
  h4 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 53px 0 0;
  }

  h4 {
    font-size: 26px;
  }
}
</style>
